<template>
  <view>
    <view class="flex cv mb20" @click="editClick">
      <image :src="data.picurl"  :style="'width:' +width+';'" mode="widthFix" @load="load" :fade-show="false"></image>
      <view class="cover pl">
        <view class="flex h100p vertical t"> 
          <view>
            <view class="flex">
              <view class="cover">
                <view class="clip bold fz">{{data.resourceName}}</view>
              </view>
              <view class="pl text-right orange noBreak">
                <text class="bold fz12">{{data.contentsize ? data.contentsize : '0'}}字</text>
              </view>
            </view>
            <view class="gray clip c3 fz12">{{data.summary}}</view>
			<view class="gray clip c4 fz12">{{data.tag}}</view>
          </view>

          <view class="fz12 gray mb3 flex lt">
            作者：
            <view class="plr2"></view>
            {{data.author}}
            
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "uni-books-pai",
    data() {
      return {
        cover: false,
      };
    },
    props: {
      flag: {
        type: String,
        default: "novel"
      },
      data: {
        type: Object,
        default () {
          return {};
        }
      },
      showRank: Boolean,
      showCategory: Boolean,
      width: {
        type: [String, Number],
        default: "160rpx"
      }
    },
    created() {
      this.data.cover = unescape(this.data.cover).replace('/agent/', '')
    },
    beforeUpdate() {
      this.data.cover = unescape(this.data.cover).replace('/agent/', '')
    },
    methods: {
      editClick() {
        this.$emit('flags', this.data)
      },
      load() {
        this.cover = true
      },
      error() {
        this.cover = false
      }
    }
  }
</script>
<style lang="scss">
  @import "common/css/base-view.scss";

  page {
    background: #f1f1f1;
    color: #33363A;
  }

  .swiper-box {
    image {
      width: 100%;
      height: 300rpx;
    }
  }

  .bg {
    background-color: #FFFFFF;
    padding: 60rpx 20rpx 0rpx 20rpx;
    margin-bottom: 20px;
    border-radius: 10rpx;
  }
</style>
